<template>
  <view class="content">
    <!-- 页面头部区域，包含搜索框和店铺信息展示 -->
    <view class="header">
      <!-- 搜索框，用户可在此输入商品名称进行搜索 -->
      <view class="search">
        <input
          type="text"
          placeholder="请输入商品名称"
          style="padding-left: 40px"
        />
      </view>
      <!-- 循环展示店铺信息，每个店铺信息包含图片、名称、月售、起送条件、基础运费和标语 -->
      <view class="listcontent" v-for="shop in shops" :key="shop.id">
        <view class="listitem">
          <img class="shop-img" :src="shop.imgUrl" />
        </view>
        <view class="listitem listcon">
          {{ shop.name }}
          <view class="listrow">
            <view>月售：{{ shop.sales }}</view>
            <view>起送：{{ shop.expressLimit }}</view>
            <view>基础运费：{{ shop.expressPrice }}</view>
          </view>
          <view style="color: red">{{ shop.slogan }}</view>
        </view>
      </view>
    </view>
    <!-- 中间商品分类和商品列表区域 -->
    <view class="middleshops">
      <!-- 商品分类切换按钮区域 -->
      <view class="click">
        <!-- 全部商品按钮，点击可切换到全部商品列表，通过动态类名控制按钮样式 -->
        <view
          class="item"
          :class="{ active: index === 1 }"
          @click="switchView(1)"
          >全部商品</view
        >
        <!-- 秒杀按钮，点击可切换到秒杀商品列表，通过动态类名控制按钮样式 -->
        <view
          class="item"
          :class="{ active: index === 2 }"
          @click="switchView(2)"
          >秒杀</view
        >
        <!-- 新鲜水果按钮，点击可切换到新鲜水果商品列表，通过动态类名控制按钮样式 -->
        <view
          class="item"
          :class="{ active: index === 3 }"
          @click="switchView(3)"
          >新鲜水果</view
        >
      </view>
      <!-- 商品列表展示区域，根据不同的分类标志（flag）展示对应的商品列表 -->
      <view class="message">
        <!-- 当flag为1时，展示全部商品列表 -->
        <view v-if="flag === 1" class="i">
          <view class="shop">
            <!-- 循环展示每个商品信息，包括图片、名称、月售、价格、原价和加入购物车按钮 -->
            <view class="itemlist" v-for="p in products" :key="p.id">
              <view class="con"
                ><img class="product-img" :src="p.imgUrl"
              /></view>
              <view class="con">
                <view class="title">{{ p.name }}</view>
                <view>月售 {{ p.sales }}</view>
                <view class="row">
                  <view class="price">￥{{ p.price }}</view>
                  <view class="oldPrice">￥{{ p.oldPrice }}</view>
                </view>
              </view>
              <view class="con button">
                <!-- 加入购物车按钮，点击调用buttonhaddcart方法将商品加入购物车 -->
                <view @click="buttonhaddcart(p)"
                  ><button>加入购物车</button></view
                >
              </view>
            </view>
          </view>
        </view>
        <!-- 当flag为2时，展示秒杀商品列表 -->
        <view v-if="flag === 2" class="i">
          <view class="shop">
            <view class="itemlist" v-for="p in products" :key="p.id">
              <view class="con"
                ><img class="product-img" :src="p.imgUrl"
              /></view>
              <view class="con">
                <view class="title">{{ p.name }}</view>
                <view>月售 {{ p.sales }}</view>
                <view class="row">
                  <view class="price">￥{{ p.price }}</view>
                  <view class="oldPrice">￥{{ p.oldPrice }}</view>
                </view>
              </view>
              <view class="con button">
                <view @click="buttonhaddcart(p)"
                  ><button>加入购物车</button></view
                >
              </view>
            </view>
          </view>
        </view>
        <!-- 当flag为3时，展示新鲜水果商品列表 -->
        <view v-if="flag === 3" class="i">
          <view class="shop">
            <view class="itemlist" v-for="p in products" :key="p.id">
              <view class="con"
                ><img class="product-img" :src="p.imgUrl"
              /></view>
              <view class="con">
                <view class="title">{{ p.name }}</view>
                <view>月售 {{ p.sales }}</view>
                <view class="row">
                  <view class="price">￥{{ p.price }}</view>
                  <view class="oldPrice">￥{{ p.oldPrice }}</view>
                </view>
              </view>
              <view class="con button">
                <view @click="buttonhaddcart(p)"
                  ><button>加入购物车</button></view
                >
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="cart-icon" @click="goToCart">
      <uni-icons type="cart"></uni-icons>
      <view class="cart-badge" v-if="cartlist.length > 0">{{
        cartlist.length
      }}</view>
    </view>

    <!-- 新增购物车信息展示区域 -->
    <view class="cart" :class="{ hidden:!showCart }">
      <view class="cart-item" v-for="(item, index) in filteredCartList" :key="index">
        <view class="conimg">
          <img class="cart-img" :src="item.imgUrl" />
        </view>
        <view class="con">
          <view class="title">{{ item.name }}</view>
          <view class="price">￥{{ item.price }}</view>
        </view>
      </view>
      <view class="cart-toggle" @click="hideCart">关闭购物车</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      shopid: "",
      shops: [],
      products: [],
      flag: 1,
      index: 1,
      cartlist: [], // 购物车数据
      showCart: false, // 控制购物车信息是否显示
    };
  },
  computed: {
    // 计算属性，过滤出本超市的购物车商品
    filteredCartList() {
      return this.cartlist.filter(item => item.shopId === this.shopid);
    }
  },
  onLoad(options) {
    const id2 = options.id;
    this.shopid = options.id;
    this.shopsdata(id2);
    this.switchView(1);

    // 初始化时加载购物车数据
    this.loadCartData();
  },
  methods: {
    // 加载购物车数据
    loadCartData() {
      try {
        const cartData = uni.getStorageSync("cartlist");
        if (cartData) {
          this.cartlist = JSON.parse(cartData);
        }
      } catch (error) {
        console.error("从本地存储加载购物车数据失败", error);
        this.cartlist = [];
      }
    },

    // 保存购物车数据到本地
    saveCartData() {
      uni.setStorageSync("cartlist", JSON.stringify(this.cartlist));
    },

    shopsdata(id2) {
      console.log(id2);
      uni.request({
        url: `http://localhost:3000/hotList?_id=${id2}`,
        success: (res) => {
          this.shops = res.data;
        },
      });
    },
    switchView(index) {
      if (this.flag === 1) {
        this.flag = index;
        this.index = index;
        uni.request({
          url: `http://localhost:3000/products?shopid=${this.shopid}`,
          success: (res) => {
            this.products = res.data;
          },
        });
      } else if (this.flag === 2) {
        this.flag = index;
        this.index = index;
        uni.request({
          url: `http://localhost:3000/seck?shopid=${this.shopid}`,
          success: (res) => {
            this.products = res.data;
          },
        });
      } else if (this.flag === 3) {
        this.flag = index;
        this.index = index;
        uni.request({
          url: `http://localhost:3000/fruit?shopid=${this.shopid}`,
          success: (res) => {
            this.products = res.data;
          },
        });
      }
    },
    // 加入购物车方法
    buttonhaddcart(product) {
      // 将商品添加到购物车
      const newItem = {
        id: product.id,
        name: product.name,
        price: product.price,
        oldPrice: product.oldPrice, // 添加原价
        imgUrl: product.imgUrl,
        sales: product.sales, // 添加月售量
        quantity: 1,
        shopId: this.shopid,
        shopName: this.shops[0]?.name || "未知超市",
        selected: true, // 默认状态
      };

      // 加入购物车
      this.cartlist.push(newItem);

      // 保存到本地存储
      this.saveCartData();

      uni.showToast({
        title: "已加入购物车",
        icon: "success",
      });
    },

    // 跳转到购物车页面（可根据实际需求修改）
    goToCart() {
      this.showCart = true;
    },

    // 关闭购物车信息展示
    hideCart() {
      this.showCart = false;
    },
  },
};
</script>

<style scoped>
/* 通用图片样式 */
img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* 店铺图片 */
.shop-img {
  width: 80px;
  height: 80px;
  border-radius: 4px;
}

/* 商品图片 */
.product-img {
  width: 70px;
  height: 70px;
  border-radius: 4px;
}

/* 购物车商品图片 */
.cart-img {
  width: 50px;
  height: 50px;
  border-radius: 4px;
}

.content .header .listcontent {
  margin-top: 20px;
  width: 100%;
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid grey;
  margin-left: 20px;
  padding-bottom: 20px;
}
.content .header .listcontent .listitem .listrow {
  display: flex;
  flex-direction: row;
  padding-top: 10px;
  padding-bottom: 10px;
}
.content .header .listcontent .listitem .listrow view {
  margin-right: 20px;
}
.content .header .listcontent .listcon {
  margin-left: 30px;
  font-size: 25px;
}
.content .header .search input {
  border: 1px solid aliceblue;
  border-radius: 2ch;
  width: 50%;
  height: 40px;
  background-color: aliceblue;
  margin-top: 15px;
  margin-left: 10px;
}
/* 中间 */
.content .middleshops {
  display: flex;
}
.content .middleshops .click {
  width: 20%;
  background-color: rgb(245, 248, 248);
}
.content .middleshops .click .item {
  width: 100%;
  height: 40px;
  text-align: center;
  margin-top: 20px;
}
.content .middleshops .click .item.active {
  background-color: pink;
}
.content .middleshops .message {
  width: 80%;
}
.message .itemlist {
  display: flex;
  margin-left: 20px;
}
.message .i {
  margin-bottom: 20px;
}
.message .shop {
  margin-top: 10px;
  width: 100%;
}
.message .shop .itemlist {
  margin-bottom: 20px;
}
.itemlist .con {
  margin-right: 40px;
}
.itemlist .button {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.itemlist .button button {
  margin-right: 10px;
  margin-left: 10px;
  border-radius: 5pt;
  margin: 0 auto;
  color: #f0f0f0;
  background-color: #1974ad;
}
.itemlist .con .title {
  margin-bottom: 10px;
  font-weight: bolder;
  font-size: 24px;
}
.itemlist .con .row {
  margin-top: 10px;
  display: flex;
}
.itemlist .con .row .price {
  color: red;
}
.itemlist .con .row .oldPrice {
  color: grey;
  padding-left: 20px;
  text-decoration: line-through;
}
/* 购物车区域样式 */
.cart {
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  z-index: 1000;
  width: 80%;
  max-height: 70vh;
  overflow-y: auto;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.cart.hidden {
  display: none;
}
.cart-item {
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
  display: flex;
  align-items: center;
}
.cart-item .conimg {
  margin-right: 15px;
}
.cart-select-all {
  margin-bottom: 5px;
}
.cart-checkbox {
  margin-right: 10px;
}
.cart-checkout {
  cursor: pointer;
  background-color: #1aad19;
  color: white;
  text-align: center;
  padding: 5px 10px;
  border-radius: 5px;
  margin-top: 5px;
}
.cart-toggle {
  cursor: pointer;
  background-color: #f0f0f0;
  padding: 8px 10px;
  text-align: center;
  border-radius: 5px;
  margin-top: 10px;
  color: #333;
}
/* 新增购物车图标样式 */
.cart-icon {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  background-color: #1aad19;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  z-index: 999;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: red;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>